<template>
    <div id="shop-select">
        <mt-navbar v-model="selected">
            <mt-tab-item id="1">综合</mt-tab-item>
            <mt-tab-item id="2">销量</mt-tab-item>
            <mt-tab-item id="3">新品</mt-tab-item>
        </mt-navbar>

        <!-- tab-container -->
        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <shopList :datass="datas.list1"></shopList>
            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <shopList :datass="datas.list2"></shopList>
            </mt-tab-container-item>
            <mt-tab-container-item id="3">
                <shopList :datass="datas.list3"></shopList>
            </mt-tab-container-item>
        </mt-tab-container>
    </div>
</template>

<script>
import shopList from "../common/shopList";
import scroll from '../../assets/js/scroll';

export default {
    props: ["datas", "data"],
    components: {
        shopList
    },
    data() {
        return {
            list: [],
            selected: "1"
        };
    },
    mounted(){
        scroll();
    }
};
</script>

<style lang="scss">

#shop-select {
    .mint-navbar{
        border-bottom: 1px solid rgb(218, 217, 217);
    }
    .mint-tab-item {
        padding: 17px 0;
        .mint-tab-item-label {
            font-size: 14px;
            font-weight: bold;
            border-right: 1px solid rgb(218, 217, 217);
        }
        &.is-selected{
            color:#F0516C;
            border-bottom: none;
        }
    }
    #shop-list {
        padding-top: 15px;
        .pic{
            position: relative;
            span{
                position: absolute;
                bottom:10px;
                left: 0;
                display: inline-block;
                padding: 5px 10px;
                color:white;
                background-image: linear-gradient(to right, rgba(0, 0, 0, 0.712) , transparent);
                font-size: 10px;
                font-weight:600;
            }
        }
        .price{
            color:#F0516C;
        }
        .buy{
            display: none;
        }
    }
}
</style>